<template>
    <el-row>
        <el-col :lg="{ span: 21,offset:2}" :md="{span: 22}">
            <div>
                <header>
                    摄影作品
                </header>
                <div>
                    <ul class="clearfix photo_tol">
                        <li class="result_tol" v-for="item in photoList" @click="seeMore(item.id)">
                            <div>
                                <p>
                                    <a><img :src=item.img_url alt=""></a>
                                    <i class="photoI"></i>
                                </p>
                                <div class="desc-title">
                                    <p class="titlePhoto">
                                       {{item.img_type}}
                                    </p>
                                    <p class="see clearfix">
                                        <a href=""><Icon type="happy-outline"/><i>10</i></a><span>{{Format(item.time)}}</span>
                                    </p>
                                </div>
                            </div>
                            <div>
                                <span>少女心</span>
                                <p>{{item.img_title}}</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </el-col>
    </el-row>
</template>
<style>
@import "../../../../static/css/frontend/photo/index.css";
</style>
<script>
    import scrollReveal from  'scrollreveal'
  export default{
      name:'',
      data(){
          return {
              scrollReveal:scrollReveal(),
              photoList:{}
          }
      },
      watch:{
          result:function () {
              let that = this;
              this.$nextTick(function () {   //或者用 this.$nextTick
                  that.init();
              })
          }
      },
      mounted(){
          let that = this;
          that.init();
          that.initPhoto();
      },
      methods:{
          init: function () {
              let target = this;
              this.scrollReveal.reveal('.result',target.configScroll);
          },
          initPhoto(){
              let that = this;
              this.fetch({
                  url: '/photos',
                  method: 'GET',
                  params: {
                  }
              }).then(function (response) {
                  that.photoList = response.data.rows;
              });
          },
          Format(fmt){
              let d = new Date(fmt);
              var times=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
              return times;
          },
          seeMore(id){
                  this.$router.push({path:'/more.html?id='+id});
          }

      }
  }
</script>